<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">
    <!--    上传图片样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>
<body>
<div id="app">

    <el-upload
            class="avatar-uploader"
            action="/files/uploadFile"

            list-type="picture-card"
            :file-list="fileList"
            limit=4

            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
            ref="upload"
    >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
            <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
            >

            <span class="el-upload-list__item-actions">
                <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>


                <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>

                <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
          </span>
        </div>

    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</div>




<script src="../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{

            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
                       {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
                      ],

            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            imageList:'',
        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            console.log("userInfo1:::"+userInfo)
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)
            // this.getMyself(this.userInfo);
        },
        methods:{
            url(code){
                if (code==1){
                    window.location.href='index.html';
                }else  if (code==2){
                    window.location.href='teleplay.html';
                }else  if (code==3){
                    window.location.href='movie.html';
                }else  if (code==4){
                    window.location.href='animation.html';
                }else  if (code==5){
                    window.location.href='varietyShows.html';
                }else  if (code==6){
                    window.location.href='updateMyself.html';
                }else  if (code==7){
                    window.location.href='../login/UserLogin.html';
                }
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },

            //4.图片文件上传
            handleAvatarSuccess (response, file, fileList) {

                console.log(fileList[fileList.length-1].name)

                //将fileList最后上传的一张图片名字和url路径修改为上传成功之后的名字和对应服务器访问的路径
                fileList[fileList.length-1].name=response.data
                fileList[fileList.length-1].url='http://localhost:8080/files/downloadFile?name='+fileList[fileList.length-1].name


                console.log(response)
                console.log(file)
                console.log(fileList)

                //拼接多图名称
                this.imageList +=  fileList[fileList.length-1].name+','
                console.log(this.imageList)


            },
            beforeUpload (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
            getImage (image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },
        }

    })
</script>

</body>
</html>
